<script lang="ts" setup>
import { onMounted, reactive, watch } from "vue";
import { shopApiGetCategory } from "@/api/shopApi/index";
// const props = defineProps(["actionId"]);
import useOrder from "@/store/order";
const { order } = useOrder();

interface IList {
  title: string;
  id: number;
}

interface IState {
  classifyList: IList[];
}
const emit = defineEmits(["onClassify"]);

const state = reactive<IState>({
  classifyList: [],
});

// 获取分类列表
const initCategory = async () => {
  const { data } = await shopApiGetCategory();
  if (data.error_code === 0) {
    state.classifyList = data.data;
  }
};

const onClassify = (id: number | null) => {
  if (order.actionId === id) return;
  order.actionId = id;
};
watch(
  () => order.actionId,
  () => {
    console.log(order.actionId, "order.actionId");
    emit("onClassify", order.actionId);
  }
);

onMounted(() => {
  initCategory();
});
</script>

<template>
  <view class="classify-one">
    <scroll-view scroll-y class="classify-list">
      <view
        @click="onClassify(null)"
        :class="['list', { action: order.actionId === null }]"
      >
        <text>全部</text>
      </view>
      <view
        @click="onClassify(0)"
        :class="['list', { action: order.actionId === 0 }]"
      >
        <text>推荐分类</text>
      </view>
      <view
        v-for="(item, index) in state.classifyList"
        :class="['list', { action: order.actionId === item.id }]"
        :key="index"
        @click="onClassify(item.id)"
      >
        <text>{{ item.title }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.classify-one {
  width: 100%;
  height: 100%;
  border-radius: 0 10px 0 0;

  background-color: #fff;
  .classify-list {
    width: 100%;
    height: 100%;
    .list {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        color: #666;
        font-size: 28rpx;
        box-sizing: border-box;
      }
    }
    .action {
      background-color: #f9f9f9;
      text {
        font-size: 28rpx;
        color: #333;
        border-left: 6rpx solid red;
        box-sizing: border-box;
      }
    }
  }
}
// }
</style>
